<template>
  <div class="hn-collapse-item">
    <div class="hn-collapse-title">
      <i class="el-icon-tickets"></i>
      {{ title }}
      <span v-if="isOpen"
            class="right-toggle"
            @click="toggleUp()">收起<i class="el-icon-minus"></i></span>
      <span v-if="!isOpen"
            class="right-toggle"
            @click="toggleDown()">展开<i class="el-icon-plus"></i></span>
    </div>
    <div class="hn-collapse-content"
         v-show="isOpen">
      <slot></slot>
    </div>
    <div class="hn-collapse-content"
         v-show="!isOpen && isBaseInfo">
      <slot name="baseInfo"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'collapseItem',
  props: {
    title: {
      default: '',
      type: String
    },
    show: {
      default: false,
      type: Boolean
    },
    isBaseInfo: {
      default: false,
      type: Boolean
    }
  },
  data() {
    const _class = this.class || ''
    return {
      isOpen: this.show,
      _class: _class
    }
  },
  methods: {
    toggleUp() {
      this.isOpen = false
    },
    toggleDown() {
      this.isOpen = true
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "~@/assets/styles/variables.scss";
.hn-collapse-item {
  margin-bottom: 10px;
}
.hn-collapse-title {
  height: $inputBorderHeight + 5;
  // background-color: #5181b0;
  border-radius: 4px 4px 0 0;
  font-size: 16px;
  color: black;
  line-height: $inputBorderHeight + 5;
  padding: 0 20px;
  .right-toggle {
    float: right;
    cursor: pointer;
    i {
      margin-left: 5px;
    }
  }
}
.hn-collapse-content {
  padding: 20px 20px 10px;
}
</style>
